Introduction to Quarto for building websites
Quarto is an open-source scientific and technical publishing system built to help create high-quality reproducible documents, presentations, websites and more.
Does it sound somewhat familiar?
Yes! Quarto is the next generation of R Markdown.
Today, we are going to focus on building website using Quarto. For more detailed information, see https://quarto.org/docs/websites/.
Before Quarto time, blogdown1 and distill were used for building and publishing website.
Coding is too hard, I want to use WordPress!
While WordPress is open-source and free, you will need to pay for hosting to publish your website.
Actually…
Quarto Website is super easy!
To create a Quarto website, follow the instruction below:
YAML: Controls configuration, navigation, metadata
This part is the same for any qmd or rmd file. Markdown is used for base syntax for content writing.
Within this R chunk, everything is the same with writing a R script.
The index.qmd file is essential. When a qmd file is named as index, it will automatically be used as the home page.
The index.qmd file must be named exactly as it is index.qmd.
The index.qmd file must be placed in the root folder next to the _quarto.yml.
about.qmd is the the About page in your website.The _quarto.yml is the control center for our Quarto website.
The _quarto.yml uses YAML language and unifies all pages under one layout and configuration.
The styles.css is a custom CSS file to help make your website pretty.
This is where you can get creative and customised your website.
This _site folder will be automatically generated once you clicked the Render function.
❌ DO NOT edit anything in the _site folder. But you can delete and re-render.
my-website/
├── _quarto.yml ← 🔧 Configuration file
├── styles.css ← 🎨 Custom styling (optional)
├── index.qmd ← 🏠 Home page
├── about.qmd ← 📄 Additional page
└── _site/ ← 🌐 Rendered website output (auto-generated)
The goal today is to make sure that everyone will have a working website published on Github Page to take home!
git clone https://github.com/yourusername/my-website.git
git add .
git commit -m "Initial Quarto site"
git push origin main
Alternatively, you can use GitHub Desktop for Git management.
quarto publish gh-pages
To learn more about Quarto see https://quarto.org.
To learn more about building website with Quarto see https://quarto.org/docs/websites/.